<template>
  <div class="page">
    <m-header :title="title"></m-header>
    <div class="page-content">
      <div class="item">
        <img src="../assets/images/ico_pwd2.png" alt="">
        <input type="password" placeholder="请输入旧密码" maxlength="21" v-model="old_pwd">
      </div>
      <div class="item">
        <img src="../assets/images/ico_pwd1.png" alt="">
        <input type="password" placeholder="请输入新密码" maxlength="21" v-model="new_pwd">
      </div>
      <div class="item">
        <img src="../assets/images/ico_pwd1.png" alt="">
        <input type="password" placeholder="确认新密码" maxlength="21" v-model="is_new_pwd">
      </div>
      <button @click="setPwd">立即修改</button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      title: '修改密码',
      old_pwd: '',
      new_pwd: '',
      is_new_pwd: ''
    }
  },
  computed: {
  	...mapState(['userInfo'])
  },
  methods: {
    setPwd(){
      if(!this.old_pwd){
        this.$toast('旧密码不能为空！');
      } else if(!this.new_pwd) {
        this.$toast('新密码不能为空！');
      } else if(this.new_pwd.length < 6) {
        this.$toast('新密码需大于6位');
      } else if(this.new_pwd !== this.is_new_pwd) {
        this.$toast('两次新密码输入不一致');
      } else {
				this.$loading.show();
				this.$http.up_pwd({
					token: this.userInfo.token,
					u_id: this.userInfo.id,
					pass: this.old_pwd,
					new_pass: this.new_pwd
				}).then((res) => {
					this.$loading.hide();
					console.log(res);
					if(res.code === 0){
						this.$toast(res.msg);
						this.old_pwd = '';
						this.new_pwd = '';
						this.is_new_pwd = '';
					} else {
						this.$toast(res.msg);
						this.old_pwd = '';
					}
				})
      }
    }
  },
  mounted () {

  }
}
</script>

<style scoped lang="scss">
@import 'styles/common.scss';
.page{
  background: #fff;
  min-height: 100vh;
}
.page-content{
  margin: rem(80) rem(60) 0 rem(60);
  .item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: rem(20);
    border-bottom: 1px solid #ddd;
    img{
      width: rem(38);
    }
    input{
      padding: rem(20) rem(40);
      width: 100%;
      color: #484848;
    }
  }
  button{
    margin-bottom: rem(40);
  }
}
</style>
